// 绘制自定义文字

import Block from "./Block";
import GridSystem from "../GridSystem";
import { ControlPoint, BlockType, FontFamily } from "../Constants";
import gsap from 'gsap'
import { hex2Rgba } from "../utils";
import Shortcuts from "../Shortcuts";

class MyText extends Block {

    background: string;
    fontFamily: FontFamily;
    editble: boolean;
    opacity: number;
    animate: any;
    inputDom: HTMLElement | null;

    constructor(text: string = "默认文本", x: number, y: number, width: number = 2, height: number = 2) {
        super(x, y, width, height);
        this.text = text;
        this.background = "transparent";
        this.fontFamily = FontFamily.HEITI
        this.width = this.height * text.length;
        this.class = BlockType.TEXT;
        this.editble = false;
        this.opacity = 1;
        this.inputDom = null;
    }

    draw(x: number, y: number, width: number, height: number): void {
        let ctx = GridSystem.gls.ctx;
        let newHeight = width / this.text.length;
        ctx.save()
        let { x: x1, y: y1 } = this.setAdsorption(x, y, width, newHeight)
        x = x1;
        y = y1;
        this.setAngle(x, y, width, newHeight)
        this.setSizeInfo(x, y, width, newHeight)
        this.drawRect(x, y, width, newHeight, this.background)

        ctx.fillStyle = this.fill || '#000';
        ctx.font = `${newHeight}px ${this.fontFamily}`;
        ctx.fillText(this.text, x, y + newHeight * .85);
        // this.drawText(x, y + newHeight * .86, width)
        ctx.restore()
        this.setFocusStyle();
        if (this.editble) {  // 如果可以编辑, 绘制光标
            ctx.save()
            ctx.moveTo(x + width + 5, y);
            ctx.lineTo(x + width + 5, y + newHeight);
            ctx.strokeStyle = `rgba(0,0,0,${this.opacity})`;
            ctx.stroke();
            ctx.restore()
            // let rgba = hex2Rgba(ctx.fillStyle, .5)
        }
        this.setControlPoints(x, y, width, newHeight);
        this.isDraged = false;
        this.drawLink(x, y, width, newHeight);

        // console.log(ctx.measureText(this.text).width, "1111");
        this.update(x, y, width, newHeight)
    }

    flicker() {
        this.inputDom = document.createElement("input");
        let { left, top } = GridSystem.gls.myCanvas.getBoundingClientRect();
        let { x, y } = GridSystem.gls.getPixelPos(this);
        this.inputDom.style.position = "fixed";
        this.inputDom.style.opacity = '0';
        this.inputDom.style.pointerEvents = 'none';
        this.inputDom.style.top = `${x + left}px`;
        this.inputDom.style.left = `${y + top}px`;
        document.body.appendChild(this.inputDom);
        // new Shortcuts("enter", this.enter2Stop.bind(this))
        setTimeout(() => {
            if (this.inputDom) {
                this.inputDom.focus();
                this.inputDom.oninput = () => {
                    this.text = this.inputDom?.value;
                    this.width = this.height * this.text.length;
                }
            }
        }, 500)
        this.editble = true;
        this.animate = gsap.to(this, {
            opacity: 0,
            duration: .45,
            yoyo: true,
            repeat: -1,
            onUpdate(e) {
                // console.log(111, that.opacity);
            }
        })
    }

    // enter2Stop() {
    //     setTimeout(() => {
    //         console.log(1111);
    //         this.stopFlicker();
    //     }, 500)
    // }

    stopFlicker() {
        this.editble = false;
        this.opacity = 1;
        if (this.inputDom) {
            document.body.removeChild(this.inputDom);
        }
        this.inputDom = null;
        this.animate && this.animate.kill();
    }

    drawText(x: number, y: number, w: number) {
        let ctx = GridSystem.gls.ctx;
        var chr = this.text.split("");
        var temp = "";
        var row = [];

        ctx.font = "20px Arial";
        ctx.fillStyle = "black";
        ctx.textBaseline = "middle";

        for (var a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < w) {
                ;
            }
            else {
                row.push(temp);
                temp = "";
            }
            temp += chr[a];
        }

        row.push(temp);

        for (var b = 0; b < row.length; b++) {
            ctx.fillText(row[b], x, y + (b + 1) * 20);
        }
    }
}

export default MyText;